﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>团建邀请函</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/animate.min.css" />
    <script src="js/swiper.min.js"></script>
    <script src="js/swiper.animate.min.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        height: 100%;
      }

      body {
        font-family: "microsoft yahei";
      }

      .swiper-container {
        /*  width: 320px;
              height: 480px;*/
        width: 100%;
        height: 100%;
        background: #fff;
      }

      .swiper-slide {
        width: 100%;
        height: 100%;
        background: url(upload/bg.png) no-repeat left top;
        background-size: 100% 100%;
      }

      img {
        display: block;
      }

      .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        background: #fff;
        opacity: 0.4;
      }

      .swiper-pagination-bullet-active {
        opacity: 1;
      }

      @-webkit-keyframes tipmove {
        0% {
          bottom: 10px;
          opacity: 0;
        }
        50% {
          bottom: 15px;
          opacity: 1;
        }
        100% {
          bottom: 20px;
          opacity: 0;
        }
      }

      .ani {
        position: absolute;
      }

      .txt {
        position: absolute;
      }

      #array {
        position: absolute;
        z-index: 999;
        -webkit-animation: tipmove 1.5s infinite ease-in-out;
      }
      section {
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-------------slide1----------------->
        <section class="swiper-slide swiper-slide1">
          <img
            src="upload/jianzhi.png"
            class="ani resize"
            style="
              width: 280px;
              left: 0;
              right: 0;
              top: -43px;
              margin: 0 auto;
              z-index: 3;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/jianzhi1.png"
            class="ani resize"
            style="
              width: 320px;
              left: 0;
              right: 0;
              top: -35px;
              margin: 0 auto;
              z-index: 3;
            "
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/祥云.png"
            class="ani resize"
            style="width: 320px; left: 0; bottom: -25px; z-index: 2"
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/组1.png"
            class="ani resize"
            style="
              width: 230px;
              height: 402px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 26px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="0.5s"
          />
          <img
            src="upload/矩形1拷贝2.png"
            class="ani resize"
            style="
              width: 230px;
              height: 415px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 15px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="1s"
          />
          <img
            src="upload/矩形1拷贝3.png"
            class="ani resize"
            style="
              width: 210px;
              height: 397px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 24px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="1.3s"
          />
          <img
            src="upload/logo.png"
            class="ani resize"
            style="
              width: 130px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 110px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="1s"
            swiper-animate-delay="1.3s"
          />
          <img
            src="upload/文字.png"
            class="ani resize"
            style="
              width: 130px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 145px;
              z-index: 1;
            "
            swiper-animate-effect="bounceIn"
            swiper-animate-duration="1s"
            swiper-animate-delay="1.3s"
          />
          <img
            src="upload/线.png"
            class="ani resize"
            style="
              width: 180px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              bottom: 125px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInUpBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.3s"
          />
          <div
            class="ani resize"
            style="
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              align-items: center;
              width: 180px;
              height: 40px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              bottom: 75px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInUpBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.5s"
          >
            <p
              class="resize"
              style="
                font-size: 14px;
                width: 210px;
                margin: 0 auto;
                text-align: center;
              "
            >
              -北京分公司团建活动-
            </p>
            <p
              class="resize"
              style="
                font-size: 13px;
                width: 100px;
                margin: 0 auto;
                text-align: center;
              "
            >
              2021.07.09
            </p>
          </div>
        </section>
        <!---------------slide2-------------->
        <section class="swiper-slide swiper-slide2">
          <img
            src="upload/jianzhi.png"
            class="ani resize"
            style="
              width: 280px;
              left: 0;
              right: 0;
              top: -43px;
              margin: 0 auto;
              z-index: 3;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/jianzhi1.png"
            class="ani resize"
            style="
              width: 320px;
              left: 0;
              right: 0;
              top: -35px;
              margin: 0 auto;
              z-index: 3;
            "
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/祥云.png"
            class="ani resize"
            style="width: 320px; left: 0; bottom: -25px; z-index: 2"
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/组1.png"
            class="ani resize"
            style="
              width: 230px;
              height: 402px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 26px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="0.5s"
          />
          <img
            src="upload/矩形1拷贝2.png"
            class="ani resize"
            style="
              width: 230px;
              height: 415px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 15px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="1s"
          />
          <img
            src="upload/矩形1拷贝3.png"
            class="ani resize"
            style="
              width: 210px;
              height: 397px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 24px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="1.3s"
          />
          <div
            class="ani resize"
            style="
              width: 180px;
              height: 202px;
              left: 71px;
              bottom: 160px;
              z-index: 1;
            "
            swiper-animate-effect="rotateInDownLeft"
            swiper-animate-duration="1s"
            swiper-animate-delay="1.5s"
          >
            <div style="margin-top: 20px;" class="">
               <p style="margin-bottom: 220px;" >晶晶你好<br/>&nbsp&nbsp &nbsp邀请你参加北京分公司团建活动。</p>
               <p style="font-size: 12px;" >时间:2021.07.09 周五</p>
               <p style="font-size: 12px;" >地点:怀柔科学城北京分公司办公室</p>  
            </div>
          <!-- <img
            src="upload/云.png"
            class="ani resize"
            style="
              width: 112px;
              height: 32px;
              right: 47px;
              top: 103px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.5s"
          /> -->
          <img
            src="upload/云.png"
            class="ani resize"
            style="
              width: 112px;
              height: 32px;
              left: 47px;
              bottom: 77px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.5s"
          />
          <img
            src="upload/logo.png"
            class="ani resize"
            style="
               width: 130px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: -20px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1s"
            swiper-animate-delay="2s"
          />
        </section>
        <!----------------slide3-------------->
        <!-- <section class="swiper-slide swiper-slide3">
          <img
            src="upload/jianzhi.png"
            class="ani resize"
            style="
              width: 280px;
              left: 0;
              right: 0;
              top: -43px;
              margin: 0 auto;
              z-index: 3;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/jianzhi1.png"
            class="ani resize"
            style="
              width: 320px;
              left: 0;
              right: 0;
              top: -35px;
              margin: 0 auto;
              z-index: 3;
            "
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/祥云.png"
            class="ani resize"
            style="width: 320px; left: 0; bottom: -25px; z-index: 2"
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/组1.png"
            class="ani resize"
            style="
              width: 230px;
              height: 402px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 26px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="0.5s"
          />
          <img
            src="upload/矩形1拷贝2.png"
            class="ani resize"
            style="
              width: 230px;
              height: 415px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 15px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="1s"
          />
          <img
            src="upload/矩形1拷贝3.png"
            class="ani resize"
            style="
              width: 210px;
              height: 397px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 24px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="1.3s"
          />
          <span
            class="ani resize"
            style="
              display: block;
              width: 72px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 93px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="1.5s"
          >
            <p
              style="
                font-size: 18px;
                font-weight: 800;
                line-height: 40px;
                left: 0px;
                right: 0;
                margin: 0 auto;
              "
            >
              时间安排
            </p>
          </span>
          <img
            src="upload/灯笼.png"
            class="ani resize"
            style="
              width: 35px;
              height: 60px;
              left: 74px;
              top: 130px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInLeftBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.3s"
          />
          <img
            src="upload/灯笼.png"
            class="ani resize"
            style="
              width: 35px;
              height: 60px;
              left: 74px;
              top: 200px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInLeftBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.6s"
          />
          <img
            src="upload/灯笼.png"
            class="ani resize"
            style="
              width: 35px;
              height: 60px;
              left: 74px;
              top: 270px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInLeftBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.9s"
          />
          <img
            src="upload/灯笼.png"
            class="ani resize"
            style="
              width: 35px;
              height: 60px;
              left: 74px;
              top: 340px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInLeftBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="2.2s"
          />
          <p
            class="ani resize"
            style="
              font-size: 13px;
              width: 100px;
              line-height: 26px;
              right: 93px;
              top: 142px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInRightBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.3s"
          >
            16:00嘉宾入场并领取吉祥物；
          </p>
          <p
            class="ani resize"
            style="
              font-size: 13px;
              width: 100px;
              line-height: 26px;
              right: 93px;
              top: 212px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInRightBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.6s"
          >
            17:00年会表演准时开始；
          </p>
          <p
            class="ani resize"
            style="
              font-size: 13px;
              width: 100px;
              line-height: 26px;
              right: 93px;
              top: 282px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInRightBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.9s"
          >
            19:00年会结束；
          </p>
          <p
            class="ani resize"
            style="
              font-size: 13px;
              width: 100px;
              line-height: 26px;
              right: 93px;
              top: 352px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInRightBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="2.2s"
          >
            19:30尊耀汇年会晚宴
          </p>
          <img
            src="upload/云.png"
            class="ani resize"
            style="
              width: 112px;
              height: 32px;
              left: 47px;
              top: 103px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="2.2s"
          />
          <img
            src="upload/云.png"
            class="ani resize"
            style="
              width: 112px;
              height: 32px;
              right: 47px;
              bottom: 63px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="2.2s"
          />
        </section> -->
        <!-------------slide4----------------->
        <!-- <section class="swiper-slide swiper-slide4">
          <img
            src="upload/jianzhi.png"
            class="ani resize"
            style="
              width: 280px;
              left: 0;
              right: 0;
              top: -43px;
              margin: 0 auto;
              z-index: 3;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/jianzhi1.png"
            class="ani resize"
            style="
              width: 320px;
              left: 0;
              right: 0;
              top: -35px;
              margin: 0 auto;
              z-index: 3;
            "
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/祥云.png"
            class="ani resize"
            style="width: 320px; left: 0; bottom: -25px; z-index: 2"
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/组1.png"
            class="ani resize"
            style="
              width: 230px;
              height: 402px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 26px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="0.5s"
          />
          <img
            src="upload/矩形1拷贝2.png"
            class="ani resize"
            style="
              width: 230px;
              height: 415px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 15px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="1s"
          />
          <img
            src="upload/矩形1拷贝3.png"
            class="ani resize"
            style="
              width: 210px;
              height: 397px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 24px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="1.3s"
          />
          <img
            src="upload/图层17.png"
            class="ani resize"
            style="
              width: 35px;
              height: 25px;
              left: 90px;
              top: 110px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInLeftBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.3s"
          />
          <img
            src="upload/图层17.png"
            class="ani resize"
            style="
              width: 35px;
              height: 25px;
              left: 90px;
              top: 210px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInLeftBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.6s"
          />
          <img
            src="upload/图层17.png"
            class="ani resize"
            style="
              width: 35px;
              height: 25px;
              left: 90px;
              top: 310px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInLeftBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.9s"
          />
          <span
            class="ani resize"
            style="
              display: block;
              width: 180px;
              left: 90px;
              top: 140px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInRightBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.3s"
          >
            <p style="font-size: 13px; letter-spacing: 1px; line-height: 26px">
              年会场地：
            </p>
            <p style="font-size: 13px; letter-spacing: 1px">
              北京市昌平区宝之谷
            </p>
          </span>
          <span
            class="ani resize"
            style="
              display: block;
              width: 180px;
              left: 90px;
              top: 240px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInRightBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.6s"
          >
            <p style="font-size: 13px; letter-spacing: 1px; line-height: 26px">
              年会时间：
            </p>
            <p style="font-size: 13px; letter-spacing: 1px">2018年01月13日</p>
          </span>
          <span
            class="ani resize"
            style="
              display: block;
              width: 180px;
              left: 90px;
              top: 340px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInRightBig"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="1.9s"
          >
            <p style="font-size: 13px; letter-spacing: 1px; line-height: 26px">
              行车路线：
            </p>
            <p style="font-size: 13px; letter-spacing: 1px">昌55路或昌67路</p>
          </span>
          <img
            src="upload/云.png"
            class="ani resize"
            style="
              width: 112px;
              height: 32px;
              right: 47px;
              top: 103px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="2.2s"
          />
          <img
            src="upload/云.png"
            class="ani resize"
            style="
              width: 112px;
              height: 32px;
              left: 47px;
              bottom: 63px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="2.2s"
          />
          <img
            src="upload/贺年.png"
            class="ani resize"
            style="
              width: 50px;
              height: 95px;
              right: 60px;
              bottom: 60px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1s"
            swiper-animate-delay="2s"
          />
        </section> -->
        <!--slide5-->
        <!-- <section class="swiper-slide swiper-slide5">
          <img
            src="upload/jianzhi.png"
            class="ani resize"
            style="
              width: 280px;
              left: 0;
              right: 0;
              top: -43px;
              margin: 0 auto;
              z-index: 3;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/jianzhi1.png"
            class="ani resize"
            style="
              width: 320px;
              left: 0;
              right: 0;
              top: -35px;
              margin: 0 auto;
              z-index: 3;
            "
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/祥云.png"
            class="ani resize"
            style="width: 320px; left: 0; bottom: -25px; z-index: 2"
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/组1.png"
            class="ani resize"
            style="
              width: 230px;
              height: 402px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 26px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="0.5s"
          />
          <img
            src="upload/矩形1拷贝2.png"
            class="ani resize"
            style="
              width: 230px;
              height: 415px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 15px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="1s"
          />
          <img
            src="upload/矩形1拷贝3.png"
            class="ani resize"
            style="
              width: 210px;
              height: 397px;
              left: 0px;
              right: 0;
              margin: 0 auto;
              top: 24px;
              z-index: 1;
            "
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.8s"
            swiper-animate-delay="1.3s"
          />
          <p
            class="ani resize"
            style="
              font-size: 18px;
              letter-spacing: 1px;
              width: 133px;
              line-height: 36px;
              left: 0;
              right: 0;
              margin: 0 auto;
              top: 125px;
              z-index: 1;
            "
            swiper-animate-effect="bounceIn"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="2.2s"
          >
            最后恭祝您及家人阖家安康，财源广进！
          </p>
          <img
            src="images/erweima.png"
            class="ani resize"
            style="
              width: 90px;
              height: 90px;
              left: 0;
              right: 0;
              margin: 0 auto;
              top: 236px;
              z-index: 1;
            "
            swiper-animate-effect="bounceInUp"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="2.2s"
          />
          <img
            src="upload/云.png"
            class="ani resize"
            style="
              width: 112px;
              height: 32px;
              right: 47px;
              top: 103px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="2.2s"
          />
          <img
            src="upload/云.png"
            class="ani resize"
            style="
              width: 112px;
              height: 32px;
              left: 47px;
              bottom: 63px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="2.2s"
          />
          <img
            src="upload/贺年.png"
            class="ani resize"
            style="
              width: 50px;
              height: 95px;
              right: 60px;
              bottom: 60px;
              z-index: 1;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1s"
            swiper-animate-delay="2s"
          />
        </section> -->
      </div>
      <img
        src="images/web-swipe-tip.png"
        style="width: 20px; height: 15px; top: 460px; left: 150px"
        id="array"
        class="resize"
      />
      <div class="swiper-pagination"></div>
    </div>
    <script>
      /*$扩展，同一元素执行完一个动画后执行另一个*/
      $.fn.extend({
        animateCss: function (animationName, callback) {
          var animationEnd =
            "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
          this.addClass("animated " + animationName).on(
            animationEnd,
            function () {
              $(this).removeClass("animated " + animationName);
              if (callback) {
                callback();
              }
            }
          );
          return this;
        },
      });
      $("._word").animateCss("bounceIn", function () {
        $("._word").addClass("animated wobble");
      });

      scaleW = window.innerWidth / 320;
      scaleH = window.innerHeight / 480;
      var resizes = document.querySelectorAll(".resize");
      for (var j = 0; j < resizes.length; j++) {
        resizes[j].style.width =
          parseInt(resizes[j].style.width) * scaleW + "px";
        resizes[j].style.height =
          parseInt(resizes[j].style.height) * scaleH + "px";
        resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + "px";
        resizes[j].style.bottom =
          parseInt(resizes[j].style.bottom) * scaleH + "px";
        resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + "px";
        resizes[j].style.right =
          parseInt(resizes[j].style.right) * scaleW + "px";
        /*resizes[j].style.letterSpacing = parseInt(resizes[j].style.letterSpacing) * scaleW + 'px';
        resizes[j].style.textIndent = parseInt(resizes[j].style.textIndent) * scaleW + 'px';
        resizes[j].style.lineHeight = parseInt(resizes[j].style.lineHeight) * scaleH + 'px';*/
      }
      var scales = document.querySelectorAll(".txt");
      for (var i = 0; i < scales.length; i++) {
        ss = scales[i].style;
        ss.webkitTransform =
          ss.MsTransform =
          ss.msTransform =
          ss.MozTransform =
          ss.OTransform =
          ss.transform =
            "translateX(" +
            (scales[i].offsetWidth * (scaleW - 1)) / 2 +
            "px) " +
            "translateY(" +
            (scales[i].offsetHeight * (scaleH - 1)) / 2 +
            "px)" +
            "scaleX(" +
            scaleW +
            ") " +
            "scaleY(" +
            scaleH +
            ") ";
      }
      var mySwiper = new Swiper(".swiper-container", {
        direction: "vertical",
        pagination: ".swiper-pagination",
        mousewheelControl: true,
        onInit: function (swiper) {
          swiperAnimateCache(swiper);
          swiperAnimate(swiper);
        },
        onSlideChangeEnd: function (swiper) {
          swiperAnimate(swiper);
        },
      });
    </script>
  </body>
</html>
